<template>
  <div>
    <div class="search-container">
      <el-form ref="searchRef" :inline="true">
        <el-form-item label="申请编号">
          <el-input v-model="projectName" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="projectName2" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="value1" type="date" placeholder="请选择时间" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="search-container">
      <div style="display: flex;">
        <el-button type="primary" @click="ressdialogVisible = true">新增</el-button>
        <el-button type="primary" style="margin-left: 20px;">删除</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="index" label="申请编号" />
        <el-table-column prop="name" label="送测负责人" />
        <el-table-column prop="reportnum1" label="送测单位" />
        <el-table-column prop="reportnum2" label="负责人联系方式" />
        <el-table-column prop="reportnum6" label="状态" />
        <el-table-column prop="reportnum4" label="创建人" />
        <el-table-column prop="reportnum5" label="创建时间" />
        <el-table-column prop="" label="操作" width="300">
          <template #default="scope">
            <el-button type="primary" size="small" @click="openDiagle(scope.row)">
              详情
            </el-button>
            <el-button type="primary" size="small" @click="openDiagle(scope.row)">
              编辑
            </el-button>
            <el-button type="primary" size="small">
              删除
            </el-button>
            <el-button type="primary" size="small">
              分配
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px;margin-bottom: 20px;display: flex;justify-content: center;">
        <el-pagination background layout="prev, pager, next, jumper" :total="2" />
      </div>

      <el-dialog v-model="dialogVisible" title="查看结果" width="800">
        <div>
          <img src="../../assets/img/5.png" />
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="resultdialogVisible = false">取消</el-button>
            <el-button type="primary" @click="resultdialogVisible = false">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-drawer v-model="drawer" title="检测机构1" :direction="rtl" size="1000px">
        <template #header="{ close, titleId, titleClass }">
          <div>
            <div style="display: flex;">
              <h4 :id="titleId" :class="titleClass">A2234222</h4>
              <div>
                <el-button type="primary">编辑</el-button>
                <el-button type="primary" style="margin-left: 10px;">删除</el-button>
              </div>
            </div>
            <div style="font-size: 12px;">
              <span>创建人</span><span style="margin-left: 20px;">Admin</span>
              <span style="margin-left: 20px;">创建时间</span><span style="margin-left: 20px;">2021-01-19 17:13</span>
            </div>
          </div>
        </template>
        <div style="background-color: rgba(242, 243, 247, 1);padding: 20px;margin-bottom: 20px;">
          <div style="padding-bottom: 5px; border-bottom: 1px solid #999999;margin-bottom: 10px;">审批</div>
          <div style="display: flex;align-items: center;justify-content: space-between;">
            <div style="display: flex;align-items: center">
              <div style="width: 100px;display: flex;">
                <div>admin</div>
                <div class="u198_text">已发起
                </div>
              </div>
              <div style="width: 100px;height: 1px; background-color: rgba(215, 215, 215, 1);"></div>
              <div style="width: 200px;display: flex;margin-left: 10px;">
                <div>超管 admin</div>
                <div class="u198_text">审批中
                </div>
              </div>
            </div>
            <div>
              <el-button type="primary">通过</el-button>
              <el-button type="primary" style="margin-left: 20px;">拒绝</el-button>
            </div>
          </div>
          <div
            style="display: flex;align-items: center;justify-content: space-between; font-size: 12px;margin-top: 5px;">
            <div style="display: flex;align-items: center">
              <div style="width: 100px;display: flex;">2022-01-25 23:22
              </div>
              <div style="width: 100px;height: 1px;"></div>
              <div style="width: 200px;display: flex;margin-left: 10px;">--</div>
            </div>
            <div>查看操作历史</div>
          </div>
        </div>
        <div>
          <div style="display: flex;align-items: center;">
            <div style="width: 4px;height: 18px;background: #000;margin-right: 10px;"></div>
            <div>
              基本信息
            </div>
          </div>
          <el-row style="margin-top: 20px;">
            <el-col :span="12">送测负责人：李飞</el-col>
            <el-col :span="12">负责人联系方式：13500000001</el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
            <el-col :span="12">创建人：admin</el-col>
            <el-col :span="12">创建时间：2024-03-01 12:00:01</el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
            <el-col :span="24">
              <div style="display: flex;align-items: center;">
                <div>上传附近：上传的附近名称</div>
                <div style="margin-left: 50px;">
                  <el-button type="primary" text> 预览</el-button>
                  <el-button type="primary" text> 下载</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
          <div style="display: flex;align-items: center;margin-top: 20px;">
            <div style="width: 4px;height: 18px;background: #000;margin-right: 10px;"></div>
            <div>
              产品信息
            </div>
          </div>
          <el-table :data="scantableData2" border style="width: 100%;margin-top: 20px;">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="index" label="产品名称" />
            <el-table-column prop="name1" label="数量" />

            <el-table-column prop="" label="操作" width="350">
              <template #default="scope">
                <el-button type="primary" size="small">
                  检测报告
                </el-button>
                <el-button type="primary" style="margin-left: 10px;" size="small" @click="resultdialogVisible = true">
                  查看结果
                </el-button>
                <el-button type="primary" style="margin-left: 10px;" size="small">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px;margin-bottom: 20px;display: flex;justify-content: center;">
            <el-pagination background layout="prev, pager, next, jumper" :total="2" />
          </div>
        </div>
      </el-drawer>
    </div>

    <el-dialog v-model="ressdialogVisible" title="新增">
      <el-form ref="searchRef" label-width="150">
        <el-row>
          <el-col :span="12">
            <el-form-item label="申请编号">
              <el-input v-model="projectName11" style="width: 240px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="送测负责人">
              <el-input v-model="projectName12" style="width: 240px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="送测单位">
              <el-input v-model="projectName13" style="width: 240px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人联系方式">
              <el-input v-model="projectName14" style="width: 240px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="ressdialogVisible = false">取消</el-button>
          <el-button type="primary" @click="ressdialogVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';
import { PropType, ref } from 'vue';
const resultdialogVisible = ref(false)
const projectName = ref('')
const value1 = ref('')
const projectName2 = ref('')

const projectName11 = ref('')
const projectName12 = ref('')
const projectName13 = ref('')
const projectName14 = ref('')
const projectName15 = ref('')
const ressdialogVisible = ref(false)
const openDiagle = (item) => {
  ressdialogVisible.value = true;
  projectName11.value = item.index;
  projectName12.value = item.name;
  projectName13.value = item.reportnum1;
  projectName14.value = item.reportnum2;
}

const tableData = ref([
  {
    index: 'A234111',
    name: '李飞',
    num: 'A检测',
    reportnum1: '深圳市第一医院',
    reportnum2: '1350000098',
    reportnum3: '',
    reportnum4: 'admin',
    reportnum5: '2022-01-19 10:37',
    reportnum6: '待分配',
    reportnum7: '2022-01-19 10:37',
    reportnum8: '晶',
    reportnum9: '晶',
  },
])

const scantableData2 = ref([
  {
    index: 'CRP',
    name1: '2',
    name2: '2',
  }
])

const dialogVisible = ref(false)
const options = [
  {
    value: '项目1',
    label: '项目1',
  },
  {
    value: '项目2',
    label: '项目2',
  },
  {
    value: '项目3',
    label: '项目3',
  },
  {
    value: '项目4',
    label: '项目4',
  },
  {
    value: '项目5',
    label: '项目5',
  },
]
const drawer = ref(false)

const scantableData = ref([{
  index: '试剂文件',
  name1: '试剂文件1',
  name2: '80M',
  name3: '试剂',
  name4: '.dat',
  name5: '546',
  name6: '0x18',
  name7: '1.0',
  name8: '96%',
  name9: '145',
  name10: '326kB',
  name11: '2022-01-19 10:37',
  name12: '成功',
}])
</script>
<style scoped>
.search-container {
  padding: 20px 30px 0;
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px
}
</style>